"use client";
import React ,{useState,useCallback} from "react";
import * as RadixDialog from "@radix-ui/react-dialog";
import { X } from "lucide-react";
 
const Dialog = ({ 
  show,
  children
}:{ 
  show: boolean;
  children: React.ReactElement;
}) => {
  const [open, setOpen] = React.useState(show);

  return (
    <RadixDialog.Root open={open} onOpenChange={setOpen} modal>
      <RadixDialog.Trigger asChild>
        <button>
          Dialog
        </button>
      </RadixDialog.Trigger>

      <RadixDialog.Portal>
        <RadixDialog.Overlay className="fixed inset-0 bg-black/30"  style={{ animation: "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)"}}/>
        <RadixDialog.Content className="bg-black rounded-2xl fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-[450px] max-h-[85vh] p-6 focus:outline-none" style={{animation: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px"}}>
          {/* <RadixDialog.Title className="m-0 font-medium text-white text-lg">
            Edit profile
          </RadixDialog.Title> */}
          <RadixDialog.Description className="mt-[10px] mb-5 text-white text-base leading-normal ">
            {children}
          </RadixDialog.Description>

          <RadixDialog.Close
            aria-label="Close"
            className="absolute right-2 top-2 "
          >
            <button
              className="flex justify-center items-center rounded-full w-8 h-8 bg-slate-700 hover:bg-slate-500"
              aria-label="Close"
            >
              <X color="white" />
            </button>
          </RadixDialog.Close>
        </RadixDialog.Content>
      </RadixDialog.Portal>
    </RadixDialog.Root>
  );
};

export default Dialog;
